<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }"
        ><span class="el-icon-s-home"></span> 首页</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- headercard -->
    <el-card class="box-card work">
      <div slot="header" class="clearfix">
        <span class="el-icon-tickets"></span>
        <span> 工作待办</span>
      </div>
      <!-- 待办事项 -->
      <div>
        <span
          >您还未上报<el-link type="primary">2021年1月</el-link
          >份非国家免疫规划疫苗采购计划，请及时上报
          <span class="btn"
            ><el-button plain size="mini">朴素按钮</el-button>
            <el-button type="success" size="mini">成功按钮</el-button></span
          >
        </span>
        <el-divider></el-divider
        ><span
          >您还未上报<el-link type="primary">2021年1月</el-link
          >份非国家免疫规划疫苗采购计划，请及时上报
          <span class="btn"
            ><el-button plain size="mini">朴素按钮</el-button>
            <el-button type="success" size="mini">成功按钮</el-button></span
          >
        </span>
      </div>
    </el-card>
    <!-- bodycard -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="el-icon-platform-eleme"></span>
            <span> 非免疫规划疫苗厂商分布</span>
          </div>
          <div class="chart1" id="chart1"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="el-icon-platform-eleme"></span>
            <span> 工作待办</span>
          </div>
          <div class="chart2" id="chart2"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    echart1() {
      let Mychart1 = echarts.init(document.getElementById("chart1"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: 80,
          icon: "triangle",
          //   bottom: "bottom",
        },
        series: [
          {
            name: "厂商分布",
            type: "pie",
            radius: ["10%", "50%"],
            right: "70px",
            label: {
              positon: "inside",
              lineHeight: 16,
            },
            data: [
              {
                value: 1048,
                name: "武汉生物",
                itemStyle: {
                  color: "#ffbb00",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#ffbb00",
                    },
                  },
                },
              },
              {
                value: 735,
                name: "兰州生物",
                itemStyle: {
                  color: "#087bae",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#087bae",
                    },
                  },
                },
              },
              {
                value: 580,
                name: "北京生物",
                itemStyle: {
                  color: "#17b3e9",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#17b3e9",
                    },
                  },
                },
              },
              {
                value: 484,
                name: "成都生物",
                itemStyle: {
                  color: "#2dbcbe",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2dbcbe",
                    },
                  },
                },
              },
              {
                value: 300,
                name: "西安生物",
                itemStyle: {
                  color: "#2693ff",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2693ff",
                    },
                  },
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      Mychart1.setOption(option);
    },
    echart2() {
      let Mychart1 = echarts.init(document.getElementById("chart2"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: 80,
          icon: "triangle",
          //   data: [{ name: "乙肝CHO" }, { name: "乙肝CHO" }, { name: "乙肝CHO" }],
          //   bottom: "bottom",
        },
        series: [
          {
            name: "厂商分布",
            type: "pie",
            radius: ["10%", "50%"],
            right: "70px",
            label: {
              positon: "inside",
              lineHeight: 16,
            },
            data: [
              {
                value: 1048,
                name: "HPV",
                itemStyle: {
                  color: "#ffbb00",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#ffbb00",
                    },
                  },
                },
              },
              {
                value: 735,
                name: "白蛋白",
                itemStyle: {
                  color: "#087bae",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#087bae",
                    },
                  },
                },
              },
              {
                value: 580,
                name: "乙肝CHO",
                itemStyle: {
                  color: "#17b3e9",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#17b3e9",
                    },
                  },
                },
              },
              {
                value: 484,
                name: "白蛋球",
                itemStyle: {
                  color: "#2dbcbe",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2dbcbe",
                    },
                  },
                },
              },
              {
                value: 310,
                name: "乙肝CHO",
                itemStyle: {
                  color: "#2693ff",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2693ff",
                    },
                  },
                },
              },
              {
                value: 302,
                name: "水痘",
                itemStyle: {
                  color: "#2ecf9e",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2ecf9e",
                    },
                  },
                },
              },
              {
                value: 330,
                name: "乙肝CHO",
                itemStyle: {
                  color: "#ff9000",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#ff9000",
                    },
                  },
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      Mychart1.setOption(option);
    },
  },
  mounted() {
    this.echart1();
    this.echart2();
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  span {
    color: #2dbcbe;
  }
  margin-bottom: 10px;
}
span[class^="el-icon"] {
  color: #2dbcbe;
}
.btn {
  float: right;
}
.el-button--default {
  color: #2dbcbe;
  border: #2dbcbe 1px solid;
}
.el-button--success {
  background-color: #2dbcbe;
}
.work {
  line-height: 14px;
  margin-bottom: 10px;
}
.el-col {
  height: 400px;
  .el-card {
    height: 100%;
    .el-card__body {
      height: 100%;
    }
    .chart1,
    .chart2 {
      height: 300px;
    }
  }
}
</style>
